<template>
  <div class="rights">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-button type="success" plain >添加用户</el-button>
    <el-table
    class="mt_20"
    border
    :data="roleList"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="scope">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-row v-for='firstChildren in scope.row.children' :key='firstChildren.id'>
            <el-col :span="4">
              <el-tag  closable @close="delRoleRights(scope.row,firstChildren.id)">{{firstChildren.authName}}</el-tag>
            </el-col>
            <el-col :span="20">
              <el-row v-for='secondChildren in firstChildren.children' :key='secondChildren.id'>
                <el-col :span="3">
                  <el-tag type="success" closable  @close="delRoleRights(scope.row,secondChildren.id)">{{secondChildren.authName}}</el-tag>
                </el-col>
                <el-col :span="21">
                  <el-tag type="warning"
                  closable
                  v-for='thirdChildren in secondChildren.children' :key='thirdChildren.id'
                  @close="delRoleRights(scope.row,thirdChildren.id)"
                  >
                  {{thirdChildren.authName}}
                  </el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if='scope.row.children.length===0'>该角色没有分配权限，请前往分配！</el-col>
          </el-row>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="roleDesc">
    </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" icon="el-icon-edit" type="primary" plain ></el-button>
        <el-button size="mini" icon="el-icon-delete" type="danger" plain ></el-button>
        <el-button size="mini" type="warning" icon="el-icon-check" plain @click="showDialog(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- //分配角色 -->
  <el-dialog title="授权角色" :visible.sync="dialogFormVisible">
    <div>
      <el-tree
        ref="tree"
        :data="data2"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :default-checked-keys="selectRight"
        :props="defaultProps">
      </el-tree>
    </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="grandRight">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import {getRoleList,delRightsList,getRightsList,grandRightList} from '@/api';
export default {
  data(){
    return{
      roleList:[],
      dialogFormVisible:false,
      data2: [],
        defaultProps: {
          children: 'children',
          label: 'authName'
        },
      selectRight:[],
      currentRole:{},
    }
  },
  created(){
    this.initRole()
  },
  methods:{
    //初始化数据
   initRole(){
     getRoleList().then(res=>{
      this.roleList=res.data
    })
   },
    //删除用户权限
    delRoleRights(row,rightId){
      delRightsList({roleId:row.id,rightId:rightId}).then(res=>{
        if(res.meta.status===200){
          row.children=res.data
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }
      })
    },
    showDialog(row){
      this.dialogFormVisible=true
      getRightsList({type:"tree"}).then(res=>{
        this.currentRole=row
        if(res.meta.status===200){
          this.data2=res.data
          console.log(this.currentRole)
        }
        this.selectRight.length=0
        this.currentRole.children.forEach(first => {
          if(first.children&&first.children.length!=0){
            first.children.forEach(second=>{
              second.children.forEach(third=>{
                this.selectRight.push(third.id)
              })
            })
          }
        });
      })
    },
    grandRight(){
      this.dialogFormVisible=false
      let arr=this.$refs.tree.getCheckedNodes()
      console.log(arr)
      //获取到父id和子id的集合
      let rids=[]
      arr.forEach(item=>{
        rids.push(item.id+','+item.pid)
      })
      let newArr=rids.join(",").split(",")
      var idArr = [...new Set(newArr)]
      grandRightList(this.currentRole.id,{rids: idArr.join(',')}).then(res=>{
        if(res.meta.status===200){
          this.$message({
            type:"success",
            message:"更新成功"
          })
          this.dialogFormVisible=false
          this.initRole()
        }
      })

    }
  }
}
</script>
<style scoped>

</style>
